<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>生日快乐</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: pink;
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background 1s;
            font-family: 'Segoe UI', sans-serif;
        }
        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }
        #message {
            font-size: 40px;
            font-weight: bold;
            color: white;
            z-index: 10;
            display: none;
        }
        #countdown {
            font-size: 50px;
            color: white;
            position: absolute;
            z-index: 20;
            display: none;
        }
        #cake {
            position: relative;
            z-index: 10;
            margin-top: 100px;
            display: none;
        }
        .cake-layer {
            margin: 0 auto;
            border-radius: 10px;
            margin-top: -5px;
            transition: all 0.3s;
        }
        .candle {
            transition: top 0.5s;
            position: relative;
        }
        .flame {
            animation: flicker 0.4s infinite alternate;
            display: none;
        }
        .candle-light {
            position: absolute;
            top: -60px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: rgba(255, 165, 0, 0.3);
            box-shadow: 0 0 15px rgba(255, 165, 0, 0.5);
            animation: light-glow 0.4s infinite alternate;
            display: none;
        }
        @keyframes flicker {
            from { transform: translateX(-50%) scale(1); opacity: 1; }
            to   { transform: translateX(-50%) scale(1.2); opacity: 0.8; }
        }
        @keyframes light-glow {
            from { transform: translateX(-50%) scale(1); opacity: 0.5; }
            to { transform: translateX(-50%) scale(1.1); opacity: 0.8; }
        }
        .smoke {
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            background: rgba(200, 200, 200, 0.7);
            border-radius: 50%;
            opacity: 0;
            animation: smoke 1.5s forwards;
        }
        @keyframes smoke {
            0% {
                opacity: 0.8;
                transform: translateX(-50%) scale(1);
            }
            100% {
                opacity: 0;
                transform: translateX(-50%) scale(1.5);
            }
        }
        #ignite-btn {
            font-size: 20px;
            background-color: #ff4081;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 200;
            display: none;
        }
        .reaction-btn {
            font-size: 20px;
            background-color: #ff4081;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            position: absolute;
            top: 75%;
            z-index: 200;
            display: none;
        }
        .like-btn {
            left: 40%;
        }
        .dislike-btn {
            left: 50%;
            transform: translateX(-50%);
        }
        #ppt-container {
            display: none;
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
        }
        .ppt-page {
            display: none;
            text-align: center;
            margin-bottom: 20px;
        }
        .ppt-page img {
            width: 45%;
            margin: 0 10px;
            border-radius: 10px;
        }
        .ppt-page p {
            font-size: 24px;
            color: #333;
            margin-bottom: 20px;
        }
        .ppt-btn {
            background-color: #ff4081;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<canvas id="particle-canvas"></canvas>
<div id="message"></div>
<div id="countdown"></div>
<div id="cake"></div>
<audio id="birthday-audio" src="./static/music/happy.mp3"></audio>
<button id="ignite-btn">点燃蜡烛</button>
<button class="reaction-btn like-btn">喜欢</button>
<button class="reaction-btn dislike-btn">不喜欢</button>

<script>
    const canvas = document.getElementById('particle-canvas');
    const ctx = canvas.getContext('2d');
    const messageEl = document.getElementById('message');
    const countdownEl = document.getElementById('countdown');
    const cakeEl = document.getElementById('cake');
    const audio = document.getElementById("birthday-audio");
    const igniteBtn = document.getElementById("ignite-btn");
    const likeBtn = document.querySelector(".like-btn");
    const dislikeBtn = document.querySelector(".dislike-btn");

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let particles = [];
    const particleCount = 500;

    function createParticles(text) {
        particles = [];
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.font = 'bold 80px "Segoe UI"';
        ctx.fillStyle = 'white';
        ctx.textAlign = 'center';
        ctx.fillText(text, canvas.width / 2, canvas.height / 2);
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        for (let y = 0; y < imageData.height; y += 6) {
            for (let x = 0; x < imageData.width; x += 6) {
                const index = (y * imageData.width + x) * 4;
                if (imageData.data[index + 3] > 128) {
                    particles.push({
                        x: Math.random() * canvas.width,
                        y: Math.random() * canvas.height,
                        tx: x,
                        ty: y,
                        vx: 0,
                        vy: 0
                    });
                }
            }
        }
    }

    function animateParticles() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (let p of particles) {
            const dx = p.tx - p.x;
            const dy = p.ty - p.y;
            p.vx += dx * 0.01;
            p.vy += dy * 0.01;
            p.vx *= 0.9;
            p.vy *= 0.9;
            p.x += p.vx;
            p.y += p.vy;

            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
            ctx.fill();
        }
        requestAnimationFrame(animateParticles);
    }

    const texts = ["HI 某某某", "祝你", "生日快乐", "Happy Birthday", "3", "2", "1"];
    let current = 0;

    function showNextText() {
        if (current >= texts.length) {
            showCake();
            return;
        }
        createParticles(texts[current]);
        messageEl.style.display = "block"; // 每次显示文本时
        current++;

        // 如果是最后一个文本，显示完后立即消失
        if (current === texts.length) {
            setTimeout(() => {
                messageEl.style.display = "none"; // 隐藏最后的"1"和其他文本
                showCake(); // 显示蛋糕
            }, 1000); // 等待动画完成后隐藏
        } else {
            setTimeout(showNextText, 1800);
        }
    }

    function showCake() {
        cakeEl.style.display = "block";
        document.body.style.background = "black";

        setTimeout(() => {
            dropCakeLayers();
        }, 2500);

        setTimeout(() => {
            igniteBtn.style.display = "block";  // 只在蛋糕出现后显示按钮
        }, 4000);
    }

    function igniteCandle() {
        // 播放生日歌
        audio.play();
        igniteBtn.style.display = "none";

        // 立即点亮蜡烛
        const candle = cakeEl.firstChild.querySelector(".candle");
        const flame = candle.querySelector(".flame");
        const light = candle.querySelector(".candle-light");

        flame.style.display = "block";
        flame.style.animation = "flicker 0.4s infinite alternate";
        light.style.display = "block";
        light.style.animation = "light-glow 0.4s infinite alternate";

        // 监听音乐播放结束事件
        audio.addEventListener('ended', function() {
            setTimeout(() => {
                countdownEl.style.display = "block";
                countdownEl.textContent = "许个愿吧";
                flame.style.display = "none";
                light.style.display = "none";
                const smoke = document.createElement("div");
                smoke.className = "smoke";
                candle.appendChild(smoke);

                // 显示按钮
                setTimeout(() => {
                    countdownEl.style.display = "none";
                    likeBtn.style.display = "block";
                    dislikeBtn.style.display = "block";
                }, 3000);
            }, 3000);
        });
    }

    function dropCakeLayers() {
        cakeEl.innerHTML = "";
        const layers = [
            { color: "#ffffff", width: 140, height: 22 },
            { color: "#ffe0f0", width: 160, height: 25 },
            { color: "#fbc3e0", width: 180, height: 28 },
            { color: "#f9a1c3", width: 200, height: 30 },
            { color: "#ff8fa3", width: 220, height: 35 },
        ];

        layers.reverse().forEach((layer, i) => {
            setTimeout(() => {
                const div = document.createElement("div");
                div.className = "cake-layer";
                div.style.background = layer.color;
                div.style.width = `${layer.width}px`;
                div.style.height = `${layer.height}px`;
                div.style.zIndex = `${100 - i}`;
                cakeEl.prepend(div);
            }, i * 600);
        });

        setTimeout(() => {
            const candle = document.createElement("div");
            candle.className = "candle";
            candle.style.width = "10px";
            candle.style.height = "40px";
            candle.style.background = "#333";
            candle.style.position = "absolute";
            candle.style.top = "-45px";
            candle.style.left = "50%";
            candle.style.transform = "translateX(-50%)";
            candle.style.borderRadius = "3px";
            cakeEl.firstChild.appendChild(candle);

            const flame = document.createElement("div");
            flame.className = "flame";
            flame.style.width = "10px";
            flame.style.height = "10px";
            flame.style.background = "orange";
            flame.style.borderRadius = "50%";
            flame.style.position = "absolute";
            flame.style.top = "-12px";
            flame.style.left = "50%";
            flame.style.transform = "translateX(-50%)";
            flame.style.boxShadow = "0 0 15px 5px orange";
            candle.appendChild(flame);

            const light = document.createElement("div");
            light.className = "candle-light";
            candle.appendChild(light);
        }, layers.length * 600 + 500);
    }

    function showPPT() {
        // 携带播放音乐的标记跳转
        window.location.href = 'ppt.html?playMusic=1';
    }


    likeBtn.addEventListener("click", showPPT);

    showNextText();
    animateParticles();
    igniteBtn.addEventListener("click", igniteCandle);
</script>
</body>
</html>
